<template>
  <div class="social-container">
    <!-- 装饰背景 -->
    <div class="decoration">
      <div class="floating-circle circle-1"></div>
      <div class="floating-circle circle-2"></div>
      <div class="floating-circle circle-3"></div>
      <div class="floating-stars">
        <span v-for="i in 20" :key="i" class="star" :style="randomStarStyle()"></span>
      </div>
    </div>

    <!-- 头部标题区域 -->
    <div class="header-section">
      <div class="title-decoration left"></div>
      <div class="title-content">
        <h1 class="main-title">社交广场</h1>
        <div class="subtitle">探索最具魅力的玩家</div>
      </div>
      <div class="title-decoration right"></div>
    </div>

    <!-- 排行榜卡片 -->
    <el-card class="rank-card">
      <template #header>
        <div class="rank-header">
          <span class="title">
            <div class="title-icon">
              <el-icon><Trophy /></el-icon>
            </div>
            魅力值排行榜
          </span>
          <el-button type="primary" :icon="Refresh" circle @click="refreshRanking" />
        </div>
      </template>

      <!-- 排行榜内容 -->
      <div class="rank-content" v-loading="loading">
        <!-- 前三名展示区 -->
        <div class="top-three">
          <!-- 第一名 -->
          <div class="rank-item first" v-if="rankings[0]">
            <div class="crown gold">1</div>
            <el-avatar :size="100" :src="rankings[0].avatar" />
            <div class="player-info">
              <div class="name">{{ formatAddress(rankings[0].address) }}</div>
              <div class="charm">魅力值: {{ rankings[0].charm }}</div>
            </div>
          </div>

          <!-- 第二名 -->
          <div class="rank-item second" v-if="rankings[1]">
            <div class="crown silver">2</div>
            <el-avatar :size="80" :src="rankings[1].avatar" />
            <div class="player-info">
              <div class="name">{{ formatAddress(rankings[1].address) }}</div>
              <div class="charm">魅力值: {{ rankings[1].charm }}</div>
            </div>
          </div>

          <!-- 第三名 -->
          <div class="rank-item third" v-if="rankings[2]">
            <div class="crown bronze">3</div>
            <el-avatar :size="80" :src="rankings[2].avatar" />
            <div class="player-info">
              <div class="name">{{ formatAddress(rankings[2].address) }}</div>
              <div class="charm">魅力值: {{ rankings[2].charm }}</div>
            </div>
          </div>
        </div>

        <!-- 其他排名列表 -->
        <el-table 
          :data="rankings.slice(3)" 
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa' }"
        >
          <el-table-column label="排名" width="80">
            <template #default="scope">
              <div class="rank-number">{{ scope.$index + 4 }}</div>
            </template>
          </el-table-column>
          
          <el-table-column label="玩家" min-width="200">
            <template #default="scope">
              <div class="player-cell">
                <el-avatar :size="40" :src="scope.row.avatar" />
                <span class="address">{{ formatAddress(scope.row.address) }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="魅力值" width="120">
            <template #default="scope">
              <div class="charm-value">
                <el-icon><Star /></el-icon>
                {{ scope.row.charm }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { 
  Check,
  Lock,
  Search,
  InfoFilled,
  Star,
  Trophy,
  Present,
  Refresh
} from '@element-plus/icons-vue';
import { useWalletStore } from '@/stores/walletStore';
import '@/styles/SocialView.css';
import {generateAvatar} from '@/interact/Asistant.js';
const walletStore = useWalletStore();
const rankings = ref([]);
const loading = ref(false);

// 格式化地址
const formatAddress = (address) => {
  return `${address.slice(0, 6)}...${address.slice(-4)}`;
};

// 获取排行榜数据
const fetchRankings = async () => {
  loading.value = true;
  try {
    const tx = await walletStore.marketContract.updateRankingBoard();
    console.log("交易回执:", tx);
    const receipt = await tx.wait();
    console.log("交易结果:", receipt);
    // 从智能合约获取排行榜数据
    const result = await walletStore.marketContract.getRankingBoard();
    console.log("排行榜数据:", result); 
        // 处理数据
        rankings.value = result.map((item, index) => ({
            rank: index + 1,                           // 添加排名
            address: item.player,                      // 玩家地址
            shortAddress: `${item.player.slice(0, 6)}...${item.player.slice(-4)}`, // 简化的地址显示
            charm: parseInt(item.charmValue.toString()),  // 转换为数字
            avatar: generateAvatar(item.player) // 使用玩家地址生成头像
        }));
        
        

    // 按魅力值排序
    rankings.value.sort((a, b) => b.charm - a.charm);
    // 重新设置排名
    rankings.value.forEach((item, index) => {
      item.rank = index + 1;
    });
    console.log("处理后的排行榜数据:", rankings.value);
  } catch (error) {
    console.error('获取排行榜失败:', error);
    ElMessage.error('获取排行榜失败');
  } finally {
    loading.value = false;
  }
};

// 刷新排行榜
const refreshRanking = () => {
  fetchRankings();
};

// 页面加载时获取数据
onMounted(() => {
  fetchRankings();
});

// 添加随机星星样式生成函数
const randomStarStyle = () => {
  const size = Math.random() * 4 + 2;
  const left = Math.random() * 100;
  const animationDelay = Math.random() * 3;
  const opacity = Math.random() * 0.5 + 0.3;
  
  return {
    width: `${size}px`,
    height: `${size}px`,
    left: `${left}%`,
    animationDelay: `${animationDelay}s`,
    opacity: opacity
  };
};
</script>


